<template>
    <div class="index-wrapper">
        <!--图片轮换框-->
        <el-carousel height="150px" trigger="click">
            <el-carousel-item v-bind:style="{background:item, backgroundSize:'cover'}" v-for="item in items" :key="item">
            </el-carousel-item>
        </el-carousel>
        <!--入驻流程区-->
        <div class="process-wrapper">
            <div class="process-header">
                <span>入驻流程</span>
                <div>Process</div>
                <el-button type="primary" class="process-page-right-next" @click="next" size="small">下一步</el-button>
            </div>
            <div class="process">
                <el-steps :space="80" direction="vertical" :active="active" finish-status="finish">
                    <el-step title="材料申请" icon="edit" description="提交入孵申请所需材料，请在官网进行下载"></el-step>
                    <el-step title="材料初审" icon="upload" description="主要审核材料的真实性"></el-step>
                    <el-step title="路演复审" icon="search" description="委托第三方机构审定入驻团队资格"></el-step>
                    <el-step title="办理手续" icon="check" description="收到入驻通知，办理手续，签订协议"></el-step>
                </el-steps>
            </div>
        </div>
        <!--团队介绍栏目-->
        <div class="team" v-for="(team,index) in IndexTeamData" :key="index">
            <img :src="'http://192.168.191.1/cyxy/'+team.team_img" alt="团队图片">
            <div class="team-info">
                <div class="team-name">
                    {{team.team_name}}
                </div>
            </div>
            <div class="team-content">
                {{team.team_content}}
            </div>
        </div>
        <br>
        <br>
    </div>
</template>

<script>
    const API_BASE = 'http://192.168.191.1'
    export default {
        data() {
            return {
                items: ['url(./static/image/bg1.jpg) no-repeat', 'url(./static/image/bg3.jpg) no-repeat'],
                active: 1,
                IndexTeamData: []
            }
        },
        methods: {
            next() {
                if (this.active++ > 3) this.active = 0;
            },
            // 首页获取四个团队信息
            getIndexTeamData() {
                this.$http({
                    method: 'GET',
                    url: API_BASE + '/cyxy/indexTeamList.php',
                    headers: { "x-requested-with": "XMLHttpRequest" },
                    emulateJSON: true
                }).then(function (res) {
                    // console.log(res.body)
                    if (res.body.code == 200) {
                        for (var i = 0; i < res.body.data.length; i++) {
                            this.IndexTeamData.push(res.body.data[i])
                        }
                        console.log('首页团队信息为：')
                        console.log(this.IndexTeamData)
                    } else {
                        console.log(res.body)
                    }
                }, function (err) {
                    console.log(err)
                    console.log('获取首页团队信息时服务器没响应')
                })
            }
        },
        mounted() {
            this.getIndexTeamData()
        }
    }

</script>

<style scoped>
    /*入驻流程框*/
    
    .process-wrapper {
        width: 92%;
        margin: 20px auto 0;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, .1);
    }
    
    .process-header {
        position: relative;
        border-bottom: 1px solid rgba(85, 85, 85, 0.3);
        font-size: 0;
    }
    /*上面的标题*/
    
    .process-header span:first-child {
        display: inline-block;
        font-size: 26px;
        margin: 10px 10px 10px 20px;
        color: rgb(72, 72, 72);
    }
    /*英文标题*/
    
    .process-header div {
        display: inline-block;
        font-size: 14px;
        color: rgb(144, 144, 144);
    }
    
    .process {
        position: relative;
        box-sizing: border-box;
        padding: 16px 24px 20px;
    }
    
    .process-page-right-next {
        position: absolute;
        right: 10px;
        top: 16px;
    }
    /*四个团队介绍*/
    
    .team {
        width: 92%;
        margin: 25px auto 0;
        background: #fff;
        min-height: 20px;
        text-align: center;
        height: 330px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, .1);
    }
    /*图片固定尺寸*/
    
    .team img {
        margin-top: 10px;
        width: 210px;
        height: 210px;
    }
    
    .team-name {
        margin-top: 10px;
        font-size: 16px;
        line-height: 24px;
        color: #07111b;
        font-weight: 700;
    }
    
    .team-content {
        margin: 5px 30px 10px 30px;
        text-align: left;
        box-sizing: border-box;
        height: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 3;
        color: #93999f;
    }
</style>